<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="search" v-show="showSearch">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="电梯名称" prop="elevatorName">
            <el-input v-model="queryParams.elevatorName" placeholder="请输入电梯名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="状态" prop="tiringState">
            <el-select v-model="queryParams.tiringState" clearable placeholder="请输入当前流程状态" style="width: 240px">
              <el-option v-for="dict in iot_tiring_state" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <!--          <el-col :span="1.5">-->
          <!--            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['iot:elevatorTiring:add']">新增</el-button>-->
          <!--          </el-col>-->
          <!--          <el-col :span="1.5">-->
          <!--            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['iot:elevatorTiring:edit']"-->
          <!--              >修改</el-button-->
          <!--            >-->
          <!--          </el-col>-->
          <el-col :span="1.5">
            <el-button v-hasPermi="['iot:elevatorTiring:remove']" :disabled="multiple" icon="Delete" plain type="danger" @click="handleDelete()"
              >删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['iot:elevatorTiring:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="elevatorTiringList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="电梯名称" align="center" prop="elevatorName" />
        <el-table-column label="上报人" align="center" prop="reportMan" />
        <el-table-column label="困人单号" align="center" prop="tiringCode" />
        <el-table-column label="困人楼层" align="center" prop="tiringFloor" />
        <el-table-column align="center" label="困人类型" prop="tiringType" />
        <el-table-column align="center" label="上报时间" prop="reportTime" width="180" />
        <el-table-column align="center" label="救援时间" prop="rescueTime" width="180" />
        <el-table-column align="center" label="完成时间" prop="completeTime" width="180" />
        <el-table-column align="center" label="困人时长" prop="tiringDuration" />
        <el-table-column align="center" label="状态" prop="tiringState">
          <template #default="scope">
            <dict-tag :options="iot_tiring_state" :value="scope.row.tiringState"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="救援人" align="center" prop="rescuePeople" />
        <el-table-column label="确认人" align="center" prop="confirmPeople" />
        <el-table-column label="困人描述" align="center" prop="tiringDescribe" />
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:elevatorTiring:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:elevatorTiring:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />
    </el-card>
    <!-- 添加或修改电梯困人管理对话框 -->
    <!--    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>-->
    <!--      <el-form ref="elevatorTiringFormRef" :model="form" :rules="rules" label-width="80px">-->
    <!--        <el-form-item label="电梯名称" prop="elevatorName">-->
    <!--          <el-input v-model="form.elevatorName" placeholder="请输入电梯名称" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="上报人" prop="reportMan">-->
    <!--          <el-input v-model="form.reportMan" placeholder="请输入上报人" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="困人楼层" prop="tiringFloor">-->
    <!--          <el-input v-model="form.tiringFloor" placeholder="请输入困人楼层" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="上报时间" prop="reportTime">-->
    <!--          <el-date-picker clearable v-model="form.reportTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择上报时间">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="救援时间" prop="rescueTime">-->
    <!--          <el-date-picker clearable v-model="form.rescueTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择救援时间">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="完成时间" prop="completeTime">-->
    <!--          <el-date-picker clearable v-model="form.completeTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择完成时间">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="困人时长" prop="tiringDuration">-->
    <!--          <el-input v-model="form.tiringDuration" placeholder="请输入困人时长" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="状态" prop="tiringState">-->
    <!--          <el-input v-model="form.tiringState" placeholder="请输入状态(0:上报困人;1:启动救援;2:接受任务;3:到达现场;4:完成救援;5:确认完成)" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="困人原因(0:停电了;1:电梯故障;2:内有老人,小孩,孕妇;3:内有危险用品;4:搬货物使用不当;5.其他)" prop="tiringCause">-->
    <!--          <el-input v-model="form.tiringCause" type="textarea" placeholder="请输入内容" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="起点经度" prop="longitudeStart">-->
    <!--          <el-input v-model="form.longitudeStart" placeholder="请输入起点经度" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="起点纬度" prop="latitudeStart">-->
    <!--          <el-input v-model="form.latitudeStart" placeholder="请输入起点纬度" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="终点经度" prop="longitudeEnd">-->
    <!--          <el-input v-model="form.longitudeEnd" placeholder="请输入终点经度" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="终点纬度" prop="latitudeEnd">-->
    <!--          <el-input v-model="form.latitudeEnd" placeholder="请输入终点纬度" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="救援人ID" prop="rescueUserId">-->
    <!--          <el-input v-model="form.rescueUserId" placeholder="请输入救援人ID" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="救援人" prop="rescuePeople">-->
    <!--          <el-input v-model="form.rescuePeople" placeholder="请输入救援人" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="救援人签字" prop="rescuePeopleSign">-->
    <!--          <el-input v-model="form.rescuePeopleSign" placeholder="请输入救援人签字" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="确认人" prop="confirmPeople">-->
    <!--          <el-input v-model="form.confirmPeople" placeholder="请输入确认人" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="确认人签字" prop="confirmPeopleSign">-->
    <!--          <el-input v-model="form.confirmPeopleSign" placeholder="请输入确认人签字" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="困人描述" prop="tiringDescribe">-->
    <!--          <el-input v-model="form.tiringDescribe" placeholder="请输入困人描述" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="审核是否通过" prop="isApproved">-->
    <!--          <el-input v-model="form.isApproved" placeholder="请输入审核是否通过" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="是否签到" prop="rescueSign">-->
    <!--          <el-input v-model="form.rescueSign" placeholder="请输入是否签到" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="备注" prop="remark">-->
    <!--          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <template #footer>-->
    <!--        <div class="dialog-footer">-->
    <!--          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>-->
    <!--          <el-button @click="cancel">取 消</el-button>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script setup name="ElevatorTiring" lang="ts">
import {
  addElevatorTiring,
  delElevatorTiring,
  getElevatorTiring,
  listElevatorTiring,
  updateElevatorTiring
} from "@/api/iot/elevatorTiring";
import { ElevatorTiringForm, ElevatorTiringQuery, ElevatorTiringVO } from "@/api/iot/elevatorTiring/types";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { iot_tiring_state } = toRefs<any>(proxy?.useDict("iot_tiring_state"));
const elevatorTiringList = ref<ElevatorTiringVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const elevatorTiringFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: ElevatorTiringForm = {
  tiringId: undefined,
  elevatorId: undefined,
  elevatorName: undefined,
  reportMan: undefined,
  tiringCode: undefined,
  tiringFloor: undefined,
  tiringType: undefined,
  reportTime: undefined,
  rescueTime: undefined,
  completeTime: undefined,
  tiringDuration: undefined,
  tiringState: undefined,
  tiringCause: undefined,
  longitudeStart: undefined,
  latitudeStart: undefined,
  longitudeEnd: undefined,
  latitudeEnd: undefined,
  rescueUserId: undefined,
  rescuePeople: undefined,
  rescuePeopleSign: undefined,
  confirmPeople: undefined,
  confirmPeopleSign: undefined,
  tiringDescribe: undefined,
  isApproved: undefined,
  rescueSign: undefined,
  remark: undefined
}
const data = reactive<PageData<ElevatorTiringForm, ElevatorTiringQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    elevatorId: undefined,
    elevatorName: undefined,
    reportMan: undefined,
    tiringCode: undefined,
    tiringFloor: undefined,
    tiringType: undefined,
    reportTime: undefined,
    rescueTime: undefined,
    completeTime: undefined,
    tiringDuration: undefined,
    tiringState: undefined,
    tiringCause: undefined,
    longitudeStart: undefined,
    latitudeStart: undefined,
    longitudeEnd: undefined,
    latitudeEnd: undefined,
    rescueUserId: undefined,
    rescuePeople: undefined,
    rescuePeopleSign: undefined,
    confirmPeople: undefined,
    confirmPeopleSign: undefined,
    tiringDescribe: undefined,
    isApproved: undefined,
    rescueSign: undefined,
    params: {
    }
  },
  rules: {
    tiringId: [
      { required: true, message: "困人ID不能为空", trigger: "blur" }
    ],
    elevatorId: [
      { required: true, message: "关联电梯ID不能为空", trigger: "blur" }
    ],
    elevatorName: [
      { required: true, message: "电梯名称不能为空", trigger: "blur" }
    ],
    reportMan: [
      { required: true, message: "上报人不能为空", trigger: "blur" }
    ],
    tiringCode: [
      { required: true, message: "困人单号不能为空", trigger: "blur" }
    ],
    tiringFloor: [
      { required: true, message: "困人楼层不能为空", trigger: "blur" }
    ],
    tiringType: [
      { required: true, message: "困人类型(0:人工上报;1:非平层停靠困人;2:不开门困人)不能为空", trigger: "change" }
    ],
    reportTime: [
      { required: true, message: "上报时间不能为空", trigger: "blur" }
    ],
    rescueTime: [
      { required: true, message: "救援时间不能为空", trigger: "blur" }
    ],
    completeTime: [
      { required: true, message: "完成时间不能为空", trigger: "blur" }
    ],
    tiringDuration: [
      { required: true, message: "困人时长不能为空", trigger: "blur" }
    ],
    tiringState: [
      { required: true, message: "状态(0:上报困人;1:启动救援;2:接受任务;3:到达现场;4:完成救援;5:确认完成)不能为空", trigger: "blur" }
    ],
    tiringCause: [
      { required: true, message: "困人原因(0:停电了;1:电梯故障;2:内有老人,小孩,孕妇;3:内有危险用品;4:搬货物使用不当;5.其他)不能为空", trigger: "blur" }
    ],
    longitudeStart: [
      { required: true, message: "起点经度不能为空", trigger: "blur" }
    ],
    latitudeStart: [
      { required: true, message: "起点纬度不能为空", trigger: "blur" }
    ],
    longitudeEnd: [
      { required: true, message: "终点经度不能为空", trigger: "blur" }
    ],
    latitudeEnd: [
      { required: true, message: "终点纬度不能为空", trigger: "blur" }
    ],
    rescueUserId: [
      { required: true, message: "救援人ID不能为空", trigger: "blur" }
    ],
    rescuePeople: [
      { required: true, message: "救援人不能为空", trigger: "blur" }
    ],
    rescuePeopleSign: [
      { required: true, message: "救援人签字不能为空", trigger: "blur" }
    ],
    confirmPeople: [
      { required: true, message: "确认人不能为空", trigger: "blur" }
    ],
    confirmPeopleSign: [
      { required: true, message: "确认人签字不能为空", trigger: "blur" }
    ],
    tiringDescribe: [
      { required: true, message: "困人描述不能为空", trigger: "blur" }
    ],
    isApproved: [
      { required: true, message: "审核是否通过不能为空", trigger: "blur" }
    ],
    rescueSign: [
      { required: true, message: "是否签到不能为空", trigger: "blur" }
    ],
    remark: [
      { required: true, message: "备注不能为空", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询电梯困人管理列表 */
const getList = async () => {
  loading.value = true;
  const res = await listElevatorTiring(queryParams.value);
  elevatorTiringList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  elevatorTiringFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: ElevatorTiringVO[]) => {
  ids.value = selection.map(item => item.tiringId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加电梯困人管理";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: ElevatorTiringVO) => {
  reset();
  const _tiringId = row?.tiringId || ids.value[0]
  const res = await getElevatorTiring(_tiringId);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = "修改电梯困人管理";
}

/** 提交按钮 */
const submitForm = () => {
  elevatorTiringFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.tiringId) {
        await updateElevatorTiring(form.value).finally(() =>  buttonLoading.value = false);
      } else {
        await addElevatorTiring(form.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("修改成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: ElevatorTiringVO) => {
  const _tiringIds = row?.tiringId || ids.value;
  await proxy?.$modal.confirm('是否确认删除电梯困人管理编号为"' + _tiringIds + '"的数据项？').finally(() => loading.value = false);
  await delElevatorTiring(_tiringIds);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('iot/elevatorTiring/export', {
    ...queryParams.value
  }, `elevatorTiring_${new Date().getTime()}.xlsx`)
}

onMounted(() => {
  getList();
});
</script>
